<style lang="scss" scoped>

.draw-bg {
  width: 100vw;
  // 如果你想要整个页面都有背景颜色，可以取消下面这行的注释
  background: linear-gradient(to bottom, rgba(85, 170, 255, .2), rgba(0, 255, 0, 0.2));
  
  .h {
    width: 750rpx;
    height: 120rpx;
    color: #faa22d;
    text-align: center;
    font-size: 100rpx;
  }

  .drawcontent {
    width: 750rpx;
    height: 900rpx;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;

    .drawitem {
      width: 220rpx;
      height: 280rpx;
      color: #ff8c6d;
      border-radius: 10rpx;

      &:nth-child(2n) {
        background: #ffdfc1;
      }

      &:nth-child(2n-1) {
        background: #fffeed;
      }

      .drawname {
        font-size: 40rpx;
        font-weight: 600;
        width: 220rpx;
        height: 50rpx;
        margin-top: 80rpx;
        text-align: center;
      }

      .getawards {
        font-size: 32rpx;
        margin-top: 20rpx;
        text-align: center;
	
      }
	  
    }
  }
  // 底部
 .tac {
 	color: hotpink;
	margin: 30rpx 0rpx;
	text-align: center;
 }
 button {
	 width: 450rpx;
	 height: 100rpx;
 }
 .indextext {
	 width: 730rpx;
	 margin: 0rpx auto;
	 border-radius: 20rpx;
	 background: rgba(0, 0, 0, 0.2);
	 color: #fff;
	 .titles {
	 	margin: 30rpx 0rpx;
	 	 text-indent: 2em;
	 }
 }
 
}
// 弹窗

.bgs {
	position: fixed;
	top: 0rpx;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.5);
}
.popup {
	position: absolute;
	top: 400rpx;
	left: 125rpx;
	width: 500rpx;
	height: 300rpx;
	background: #fffeed;
	border-radius: 20rpx;
	// 关闭
	.close {
		position: absolute;
		font-size: 50rpx;
		right: 15rpx;
		top: 3rpx;
		
	}
	.tast {
		text-align: center;
		height: 85rpx;
		line-height: 85rpx;
	}
	.drawtext {
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
	}
	button {
		display: block;
		width: 200rpx;
	}
	
}

</style>
<template>
	<view class="draw-bg">
		<view class="h">每日一转</view>
		<view class="h">好运相伴</view>
		<view class="drawcontent">
			<view class="drawitem" v-for="(item,index) in bs.awards" :key="item.id" :style="index === random ? `background-color: pink;`: ''">
				<view class="drawname">{{item.awaname}}</view>
				<view class="getawards">{{item.getawards}}</view>
			</view>
		</view>
		<view class="tac">您还有: <text>{{count}}</text> 次机会</view>
		<button type="warn" @click="qidong">抽奖</button>
		<view class="indextext">
			<view class="titles">
				一、活动时间:2024年11月13日00:00-2024年12月13日23:59
			</view>
			<view class="titles">
				二、活动规则:
				
				1、活动期间可在蜜雪冰城APP/小程序点击活动推广页面,进入活动页面后参与活动,用户参与大转盘就有机会获得奖品,此活动为概率中奖。
				
				2、用户在活动期间总计有3次免费抽奖的次数,免费次数用完后,可消耗18雪王币/次继续参与抽奖,不限参与次数;
				
				3、活动期间,使用小程序/APP下单,实付满10元可额外获得一次抽奖机会。每天最多获得一次抽奖机会。
			</view>
		</view>
	</view>
	<view v-show="popup" class="bgs">
		<view class="popup">
			<text @click="drawclose" class="close"> x </text>
			<view class="tast">温馨提示</view>
			<view class="drawtext">{{bs.awards[random].getawards}}</view>
			<button type="warn" @click="suss" >确定</button>
		</view>
	</view>
</template>

<script setup>
	import {
		getdraw
	} from '../../api/draw';
	import {
		ref, onMounted
	} from 'vue'
	const bs = ref('') //抽奖素材
	const random =ref(4) //随机数
	let timerId = null //计时器
	const flag = ref(0) //开关
	const count = ref(3) //次数
	const popup = ref(false) // 弹出层
	const render = async () => {
		const res = await getdraw()
		// console.log(res.data)
		bs.value = res.data
		console.log(bs.value)
		// console.log(bs.value ,'bs数据')
	}
	render()
	/* 
	业务逻辑
	 1.获取数组 生成随机 获取到了给当前盒子添加高亮
	 */
	
	const qidong = (e)=>{
		// console.log()
		console.log(11)
			flag.value +=1
	if(count.value === 0) return 
	if(flag.value){
		clearInterval(timerId)
		timerId = setInterval(()=>{
			random.value = Math.floor(Math.random() * bs.value.awards.length )
			if(flag.value % 2 === 0) {
			clearInterval(timerId)
			if(random.value === 7) count.value ++ 	
			count.value -=1
			popup.value = true
			}
		},100)
	}
	}
	
const drawclose=()=>{
			popup.value = false
		}
		const suss=()=>{
			popup.value = false
		}
</script>